// 数据页面JavaScript
window.addEventListener('DOMContentLoaded', () => {
    console.log('数据页面加载完成');
    
    // 获取配置信息
    const config = JSON.parse(localStorage.getItem('mqttConfig') || '{}');
    
    // 显示连接状态和配置路径
    document.getElementById('connection-status').textContent = config.connected ? '已连接' : '未连接';
    document.getElementById('subscribe-topic-display').textContent = config.subscribeTopic || '未配置';
    document.getElementById('publish-topic-display').textContent = config.publishTopic || '未配置';
    
    // 添加模块按钮点击事件
    document.getElementById('add-module-btn').addEventListener('click', () => {
        window.location.href = 'module-config.html';
    });
    
    // 加载已有模块
    loadModules();
});

// 加载模块函数
function loadModules() {
    const modules = JSON.parse(localStorage.getItem('modules') || '[]');
    const container = document.querySelector('.modules-container');
    
    container.innerHTML = '';
    
    modules.forEach(module => {
        const moduleElement = document.createElement('div');
        moduleElement.className = 'module';
        
        let contentHTML = '';
        
        // 根据模块类型生成不同内容
        switch(module.type) {
            case 'display':
                contentHTML = `
                    <div class="module-data" id="${module.id}-data">等待数据...</div>
                `;
                break;
            case 'button':
                contentHTML = `
                    <button class="module-button" id="${module.id}-btn">${module.buttonText || '发送'}</button>
                `;
                break;
            case 'input':
                contentHTML = `
                    <div class="module-input-group">
                        <input type="text" class="module-input" id="${module.id}-input" placeholder="${module.placeholder || '输入消息'}">
                        <button class="module-send-btn" id="${module.id}-send-btn">发送</button>
                    </div>
                `;
                break;
        }
        
        moduleElement.innerHTML = `
            <div class="module-header">
                <img src="${module.image || './images/default-module.png'}" class="module-image" alt="模块图片">
                <span class="module-title">${module.title || '未命名模块'}</span>
            </div>
            <div class="module-content">
                ${contentHTML}
            </div>
        `;
        
        container.appendChild(moduleElement);
    });
}